<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>XEM & ZFC</title>
    <meta name="description" content="XEM & ZFC" />
    <meta name="keywords" content="xem,xmt,520,love" />


    <link th:href="@{/css/bootstrapv3.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet" />

    <link rel="stylesheet" th:href="@{/comm/swiper/css/swiper-bundle.min.css}" />
    <script th:src="@{/comm/swiper/js/swiper-bundle.min.js}"></script>
    <script th:src="@{/js/jqueryv3.7.1.min.js}"></script>
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            font-size: 14px;
            margin: 0;
            padding: 0;
        }

        .swiper {
            width: 100%;
            height: 60%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: -25px;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 95%;
            /* 图片填充整个容器，保持原始宽高比并裁剪多余部分 */
            /*object-fit: cover;*/
        }
        .top-nav{
            height: 45px;
            line-height: 45px;
            padding-left: 10px;
        }
        .content{
            padding: 0px 15px 0px 15px;
        }
    </style>
</head>
<body>

<div class="top-nav">
    <i class="glyphicon glyphicon-menu-left" onclick="returnIndexPage()"></i>
    <span th:text="${resource.title}"></span>
</div>
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide" th:each="item:${detail}">
            <img th:src="${item}" alt="" class="img-responsive" />
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<div class="content">
    <h4 th:text="${resource.subheading}"></h4>
    <p th:utext="${resource.content}"></p>
</div>

<script>
    var swiper = new Swiper(".mySwiper", {
        pagination: {
            el: ".swiper-pagination",
            dynamicBullets: true,
        },
    });
    $(function () {
    })

    function returnIndexPage(){
        window.location.href = "/index"
    }


    // function getTitleData(){
    //     $.get({
    //         url: "https://api.shadiao.pro/du",
    //         success: function (data) {
    //             if (data.data.text.length > 23){
    //                 getTitleData()
    //             }else{
    //                 $("#title").text(data.data.text)
    //             }
    //         }
    //     })
    // }



</script>
</body>
</html>
